<template>
  <a-card :bordered="false">
    <div style="margin-bottom: 20px">
      <p style="display: inline-block;font-weight: bold;font-size: 16px;color: #999999">调课管理</p>
      <p style="display: inline-block;font-weight: bold;font-size: 16px">></p>
      <p style="display: inline-block;font-weight: bold;font-size: 16px">行政调课</p>
    </div>
    <div style="background: #E9EDF6;width: 100%;height: 120px;padding: 20px;margin-bottom: 20px">
      <p class="cm-text1">操作提示：</p>
      <p class="cm-text1">1、选择课表中已安排课程的节次，拖动至需要调整的节次，在弹出框中选择原上课日期和新上课日期，即可提交调课申请。</p>
      <p class="cm-text1"> 2、合班上课或多媒体、实训室等上课场景只需调整上课日期即可，不能与同其他课程互换。请至少提前一天提出调课申请。</p>
    </div>

    <div class="man-lift">
      <div style="display: inline-block;width: 65%">
        <p style="display: inline-block;margin-right: 10px;font-size: 14px;color: #999999;font-weight: bold;">名称</p>
        <a-input style="width: 75%;display: inline-block"/>
      </div>
      <a-button style="background-color: #028BE2;color: #FFFFFF;display: inline-block">
        <IconFont style="font-weight: bold;" type="iconsousuo" />
        搜索
      </a-button>
      <a-directory-tree multiple default-expand-all>
        <a-tree
          :tree-data="classData"
        >
        </a-tree>
      </a-directory-tree>
    </div>

    <div class="man-right">
      <div>
        <p style=" text-align:center;font-size: 18px;font-weight: bold;">软测一班 ( 2020-2021上学期 ) 排课</p>
      </div>
    <div class="class-table">
      <div class="table-wrapper">
        <div class="tabel-container">
            <table>
            <thead>
            <tr>
              <th>时间</th>
              <th v-for="(weekNum, weekIndex) in classTableData.courses.length" :key="weekIndex"> {{'星期' + digital2Chinese(weekIndex, 'week')}}</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(lesson, lessonIndex) in classTableData.lessons" :key="lessonIndex">
              <td>
                <p>{{'第' + digital2Chinese(lessonIndex) + "节"}}</p>
                <p class="period">{{ lesson }}</p>
              </td>

              <td v-for="(course, courseIndex) in classTableData.courses" :key="courseIndex" @click="scheduling">
                <p>{{classTableData.courses[courseIndex][lessonIndex]}}</p>
                <p style="color: #FC620E"></p>
              </td>
            </tr>
            </tbody>
          </table>
          <div class="table-div">午休</div>
          <table>
            <thead>

            </thead>
            <tbody>
            <tr v-for="(lesson, lessonIndex) in classTableDataS.lessonsS" :key="lessonIndex">
              <td>
                <p>{{'第' + digital2ChineseS(lessonIndex) + "节"}}</p>
                <p class="period">{{ lesson }}</p>
              </td>

              <td v-for="(course, courseIndex) in classTableDataS.coursesS" :key="courseIndex">
                <p>{{classTableDataS.coursesS[courseIndex][lessonIndex]}}</p>
                <p style="color: #FC620E"></p>
              </td>
            </tr>
            </tbody>
          </table>
          <div class="table-div">晚自习</div>
        </div>
      </div>
    </div>
    </div>

    <apply-model ref="applyModel"></apply-model>

  </a-card>
</template>
<script>
import '@/assets/couMan/universal.less'
import '@/assets/courses/classSchedule.less'
import applyModel from '@views/courseManagement/administrative/modules/applyModel'
import { IconFont } from '@/cas/ico'
import '@assets/less/generalStyle.less'
export default {
  data() {
    return {
      classTableData: {
        lessons: [
          '08:00-08:45',
          '09:00-09:45',
          '10:00-10:45',
          '11:00-11:45',
        ],
        courses: [
          ['外语', '高数', '体育', '政治'],
          ['语文', '高数', '外语', '历史',],
          ['数据库', '高级程序', '高级程序', '政治',],
          ['语文', '高数', '外语', '历史'],
          ['数据库', '算法', '高级程序', ''],
          ['', '', '', ''],
          ['', '', '', ''],
        ]
      },
      classTableDataS: {
        lessonsS: [
          '14:00-14:45',
          '15:00-15:45',
          '16:00-16:45',
          '17:00-17:45',
          '19:00-19:45',
        ],
        coursesS: [
          ['语文', '文学', '高级程序', '政治',''],
          ['语文', '高数', '外语', '历史',''],
          ['数据库', '高级程序', '高级程序', '政治',''],
          ['语文', '高数', '外语', '历史',''],
          ['数据库', '算法', '高级程序', '高级程序',''],
          ['', '', '', ''],
          ['', '', '', ''],
        ],
      },
    }
  },
  created() {

  },
  components: {
    IconFont,
    applyModel
  },
  computed: {},
  methods: {
    digital2Chinese(num, identifier) {
      const character = ['一','二', '三', '四', '五', '六','日'];
      return identifier === 'week' && (num === 0 || num === 7) ? '一' : character[num];
    },
    digital2ChineseS(num, identifier) {
      const character = ['五', '六', '七', '八', '九'];
      return identifier === 'week' && (num === 0 || num === 7) ? '一' : character[num];
      if(this.classTableDataS.coursesS==''){
        this.jsName = ''
      }else {
        this.jsName = '教室101 李老师'
      }
    },
    scheduling(){
      this.$refs.applyModel.add()
      this.$refs.applyModel.title='申请调课'
    }
  }
}
</script>
<style scoped>

</style>
